import React, { useContext } from "react";
import './index.css'
import useLocalContext from "../../tools/useLocalContext";
import resetAll from "../../tools/resetAll";
import checkAll from "../../tools/checkAll"
import settlement from "../../tools/settlement"
const Bottom = (props) => {
  const { state, dispatch } = useContext(useLocalContext())

  return <div className='bottomContent'>
    <div className='bottom'>
      <div onClick={()=>{
          checkAll(state, dispatch)
        }}>
        <span className={
                state.detailList.length && state.allChecked ?
                  'selectCircle selectCircleActive' :
                  'selectCircle'}> </span>
        全选
      </div>
      <div className='delete' onClick={()=>{
        resetAll(dispatch)
      }}>
        删除
      </div>
      <div className='bottomRight'>
        已选
        <span className='count'>
          {props.checkedCount}
        </span>
        件 商品
        合计（不含运费）：
        <span className='total'>
          {props.checkedPrice}
        </span>
        <div
          className={props.checkedCount>0 ? 'button buttonActive' : 'button'}
          onClick={()=>{
            settlement(props.checkedCount,dispatch)
          }}
        >
          结算
        </div>
      </div>
    </div>
  </div>
}

export default Bottom
